<template>
  <div class="thesisUpload">
      <div class="box">
        <div class="box_hd">
          <el-form :inline="true" :model="thesisForm" class="search_form">
            <el-form-item label="学号">
              <el-input v-model="thesisForm.sno" placeholder="请输入学号"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="thesisForm.sname" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch" class = "primaryBtn">查询</el-button>
            </el-form-item>
            <el-form-item class = "fr">
              <el-button type="danger" @click="batchDel" class = "primaryBtn">批量删除</el-button>
              <el-button type="primary" v-if="uploadThe" @click="uploadThesis('0')" class = "primaryBtn">上传</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="box_bd clearfix">
          <div class="con_left fl">
            <div class="tree_con">
              <div class="tree_hd">
                实体类型
              </div>
              <div class="tree_bd">
                <el-tree
                  :default-expand-all="true"
                  :data="data"
                  :props="defaultProps"
                  accordion
                  @node-click="handleNodeClick">
                </el-tree>
              </div>
            </div>
          </div>
          <div class="con_right fl" id = "tab_con">
            <el-table :data='tableData' style="height:100%" height="100%" header-row-class-name='table_head' @selection-change="handleSelectionChange" v-loading="loading" :row-class-name="tableRowClassName">
              <el-table-column type="selection" min-width="5%" align="center">
              </el-table-column>
              <el-table-column property="sNo" min-width="10%" label="学号" align="center">
              </el-table-column>
              <el-table-column property="sName" min-width="10%" label="姓名" align="center">
              </el-table-column>
              <el-table-column property="thesisTitle" min-width="15%" label="题目" align="center">
              </el-table-column>
              <el-table-column min-width="15%" label="关键词" align="center">
                <template slot-scope="scope">
                  <el-tag size="medium" v-for="(keyword,index) in StringToArr(scope.row.keywords)" :key="index">{{ keyword }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column min-width="10%" label="论文" align="center">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <el-button type="text" @click="openOnlineRead(scope.row.thesisFileName)">在线阅读</el-button>
                    <div slot="reference" class="name-wrapper">
                      <span>{{ scope.row.thesisFileName }}</span>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column min-width="15%" label="附件" align="center">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <el-button type="text" @click="downloadEnclosure(scope.row.enclosureFileName)">下载附件</el-button>
                    <div slot="reference" class="name-wrapper">
                      <span>{{ scope.row.enclosureFileName }}</span>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="20%" align="center">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="uploadThesis(scope.row)">修改</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="thesisDel(scope.row.sNo)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <div class="pagination_box">
                <el-pagination
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="prev, pager, next, jumper, total, sizes"
                :total="totalSize"
                @size-change="handleSizeChange"
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange">
                </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!-- 上传论文弹窗 -->
      <div class = "normal_dialog uploadThesis_dialog">
          <el-dialog title="上传论文" :visible.sync="uploadThesisDialog" @close='closeUploadThesis'>
            <UploadThesis ref = "uploadThesis" v-if="uploadThesisDialog" :graSort="graSort" :thesisData="thesisData"></UploadThesis>
          </el-dialog>
      </div>
      <!-- 论文在线阅读弹窗 -->
      <div class = "normal_dialog onlineRead_dialog">
          <el-dialog title="" :visible.sync="onlineReadDialog" @close='closeOnlineRead' fullscreen :show-close="false">
            <OnlineReadThesis :thesisFileName="thesisFileName" v-if="onlineReadDialog"></OnlineReadThesis>
          </el-dialog>
      </div>
  </div>
</template>

<script>
import { _getTree } from '../../network/common.js'
import { _getThesisData, _searchThesis, _batchDelThesis, _delThesis, _downloadThesis } from '../../network/dissertation.js'
import UploadThesis from '../../components/graduationProject/UploadThesis.vue'
import OnlineReadThesis from '../../components/graduationProject/OnlineReadThesis.vue'

export default {
  name: 'thesisUpload',
  data () {
    return {
      tableData: [],
      totalSize: 0,
      pageSize: 10,
      currentPage: 1,
      loading: false,        //加载
      uploadThe: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      thesisForm: {
        sno: '',
        sname: ''
      },
      uploadThesisDialog: false,
      onlineReadDialog: false,
      multipleSelection: [],
      graSort: {
        grade: '',
        major: '',
        team: ''
      },
      thesisData: {},
      thesisFileName: ''
    }
  },
  mounted () {
    _getTree().then(res => {
      if (res.status === 200) {
        this.data = res.data.data
      } else {
        switch(res.headers.flag){
          case '-1':
            this.$message.error('请先登录')
            this.$router.push('/login')
            break
          case '-2':
            localStorage.removeItem('token')
            this.$message.error('token错误或已失效，请重新登录')
            this.$router.push('/login')
            break
          default:
            this.$message.error('节点树获取数据失败')
            break;
        }
      }
    }).catch(res => {
      this.$message.error("未知错误，请联系管理员")
    })
    this.onSearch()
  },
  methods: {
    handleSizeChange (val) {
      this.pageSize = val
      // this.getTableData(this.currentPage, val)
      this.onSearch()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      // this.getTableData(val, this.pageSize)
      this.onSearch()
    },
    handleNodeClick(data) {
      switch(data.labelType){
        case 1:
          this.graSort.grade = data.labelId
          this.graSort.major = ''
          this.graSort.team = ''
          this.uploadThe = false
          break
        case 2:
          this.graSort.grade = ''
          this.graSort.major = data.labelId
          this.graSort.team = ''
          this.uploadThe = false
          break
        case 3:
          this.graSort.grade = ''
          this.graSort.major = ''
          this.graSort.team = data.labelId
          this.uploadThe = true
          break
        default:
          break
      }
      this.currentPage = 1;
      this.onSearch()
    },
    /* 设置表格隔行变色 */
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'warning-row';
      } else {
        return '';
      }
    },
    /* 查询 */
    onSearch() {
      _getThesisData(this.graSort.grade, this.graSort.major, this.graSort.team, this.thesisForm.sno, this.thesisForm.sname, this.currentPage, this.pageSize).then(res => {
        if (res.status === 200) {
          this.tableData = res.data.tableData
          this.totalSize = res.data.total
        }
        else{
          this.$message.error('数据获取失败')
        }
      }).catch(res => {
        this.$message.error('数据获取失败，请联系管理员')
      })
    },
    /* 上传论文 */
    uploadThesis (row) {
     // 修改
      if(row !== '0'){
        this.thesisData =  Object.assign({}, row)
      }
      this.uploadThesisDialog = true
    },
    /* 关闭上传论文 */
    closeUploadThesis () {
      this.thesisData = {}
      this.$refs.uploadThesis.emptyData()
      this.uploadThesisDialog = false
    },
    /* 打开在线阅读 */
    openOnlineRead (thesisFileName) {
      this.onlineReadDialog = true
      this.thesisFileName = thesisFileName
    },
    /* 关闭在线阅读 */
    closeOnlineRead () {
      this.onlineReadDialog = false 
      this.thesisFileName = ''
    },
    /* 复选框回调 */
    handleSelectionChange(val) {
      this.multipleSelection = []
      for(let i = 0;i < val.length;i++){
        this.multipleSelection.push(val[i].sNo)
      }
    },
    /* 批量删除 */
    batchDel () {
      if(this.multipleSelection.length === 0){
        this.$message({
          message: '请选择列表项',
          type: 'error'
        })
      } else {
        let ids = this.multipleSelection.join(',')
        _batchDelThesis(ids).then(res => {
          if (res.data.code === 200) {
            this.$message.success('批量删除成功')
            for(let i = 0;i < this.multipleSelection.length;i++){
              let index = this.tableData.findIndex((item) => {
                return this.multipleSelection[i] === item.sNo
              })
              this.tableData.splice(index, 1)
              if(this.tableData.length == 0){                     //当前页为空自动跳转上一页
                const totalPage = Math.ceil((this.totalSize - this.multipleSelection.length) / this.pageSize) // 剩余数据总页数
                this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
                this.totalSize = this.totalSize - this.multipleSelection.length
                this.onSearch()
              }
            }
          }
          else{
            this.$message.error('删除失败')
          }
        }).catch(res => {
          this.$message.error('删除失败，请联系管理员')
        })
      }
    },
    /* 单个删除 */
    thesisDel (id) {
      _delThesis(id).then(res => {
        if (res.data.code === 200) {
          this.$message.success('删除成功')
          let index = this.tableData.findIndex((item) => {
            return id === item.sNo
          })
          this.tableData.splice(index, 1)
          if(this.tableData.length == 0){                     //当前页为空自动跳转上一页
            const totalPage = Math.ceil((this.totalSize - 1) / this.pageSize) // 总页数
            this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
            this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            this.totalSize--
            this.onSearch()
          }
        }
        else{
          this.$message.error('删除失败')
        }
      }).catch(res => {
        this.$message.error('删除失败,请联系管理员')
      })
    },
    /* 下载附件 */
    downloadEnclosure (enclosureFileName) {
      window.location.href = '/api' + enclosureFileName
    },
    /* 字符串转为数组 */
    StringToArr (character) {
      let chaArr = character.split(',')
      return chaArr
    }
  },
  components: {
    UploadThesis,
    OnlineReadThesis
  }
}
</script>

<style scoped>
  @import '../../assets/overlap.css';
  @import '../../assets/common.css';
</style>
<style>
/* 分页 */
.pagination_box{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
/* 表格 */
.el-table .warning-row {
  background:#eff2f6;
}
.el-popover{
  min-width: 75px;
}
/* 表单 */
.search_form .el-form-item{
  margin-bottom: 0;
}
.search_form .el-form-item__content,.search_form .el-form-item__label{
  line-height: 45px;
}
.search_form .el-input__inner{
  width: 120px;
  height: 33px;
  line-height: 33px;
}

.uploadThesis_dialog .el-dialog{
  width: 600px;
}
.onlineRead_dialog .el-dialog__header,.onlineRead_dialog .el-dialog__body{
  padding: 0;
  border: 0;
}
.onlineRead_dialog .el-dialog__body{
  height: 100%;
}
</style>
<style scoped>
.thesisUpload{
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #f7f7f7;
}
.box{
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.box .box_hd{
  height: 45px;
  padding: 0 10px;
  border-bottom: 1px solid #f2f2f2;
}
.box .box_bd{
  height: calc(100% - 45px);
  padding: 10px;
}
.box_bd .con_left{
  width: 250px;
  height: 100%;
  padding-right: 10px;
}
.box_bd .con_right{
  position: relative;
  width: calc(100% - 250px);
  height: 100%;
  border: 1px solid #e6e6e6;
  padding-bottom: 42px;
}
/* 树 */
.tree_con{
  height: 100%;
  border: 1px solid #e6e6e6;
}
.tree_con .tree_hd{
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  background-color: #2ca077;
  color: #fff;
}
.tree_con .tree_bd{
  padding: 10px 0;
}
.primaryBtn{
  padding: 8px 15px;
}
</style>

